<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>省市联动下拉列表</title>
<style>
  select {
    margin: 5px;
    padding: 5px;
  }
</style>
</head>
<body>
<h2>省市联动选择</h2>
<select id="provinceSelect" onchange="loadCities(this.value)">
  <option value="">请选择省份</option>
  <!-- 假设这里已经有了省份的数据 -->
  <option value="1">北京市</option>
  <option value="2">上海市</option>
  <option value="3">上海市</option>
  <option value="4">上海市</option>
  <!-- 更多省份选项... -->
</select>
<select id="citySelect">
  <option value="">请选择城市</option>
</select>

<script>
// 模拟从服务器获取城市数据
function getCities(provinceId) {
  const provinces = [
    { id: '1', name: '北京市', cities: ['东城区', '西城区', '朝阳区'] },
    { id: '2', name: 'yyy', cities: ['黄浦区', '静安区', '浦东新区'] },
    { id: '3', name: '上海yyy市', cities: ['黄浦区1', '静安区1', '浦东新区1'] },
    { id: '4', name: 'yyy', cities: ['黄浦区2', '静安区2', '浦东新区2'] }
    // 更多省份数据...
  ];

  for (let i = 0; i < provinces.length; i++) {
    if (provinces[i].id === provinceId) {
      return provinces[i].cities;
    }
  }

  return [];
}

function loadCities(provinceId) {
  const citySelect = document.getElementById('citySelect');
  citySelect.innerHTML = '<option value="">请选择城市</option>';

  const cities = getCities(provinceId);

  let index = 0;
  while (index < cities.length) {
    let option = document.createElement('option');
    option.text = cities[index];
    option.value = cities[index];
    citySelect.add(option);
    index++;
  }
}

// 初始化省份选择
document.getElementById('provinceSelect').onchange = function() {
  loadCities(this.value);
};
</script>
</body>
</html>